page {
  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
.container {
  overflow: hidden;
  padding: 0 16px;
  min-height: 100vh;
  box-sizing: border-box;
}
@font-face {
  font-family: 'icomoon';
  src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
.icon-at-sign:before {
  content: "\E900";
}
.icon-chevron-right:before {
  content: "\E909";
}
.icon-cog:before {
  content: "\E901";
}
.icon-headphones:before {
  content: "\E902";
}
.icon-heart:before {
  content: "\E903";
}
.icon-info:before {
  content: "\E904";
}
.icon-pause:before {
  content: "\E905";
}
.icon-play:before {
  content: "\E906";
}
.icon-rotate-cw:before {
  content: "\E90A";
}
.icon-trash-2:before {
  content: "\E907";
}
.icon-trash:before {
  content: "\E908";
}
.icon-unlock:before {
  content: "\E90B";
}
.icon-user:before {
  content: "\E90C";
}
.circle-img {
  border-radius: 50%;
}
.text-overfolw {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.all-center {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.override-btn {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent;
}
.override-btn::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.paragraph {
  display: block;
  margin-top: 12px;
}
.comment {
  color: #acacab;
}
.error {
  color: #fd4848;
}
.form {
  margin: 12px;
}
.input {
  border: 1px solid #eee;
  padding: 8px;
  line-height: 32px;
  height: 32px;
  min-height: 32px;
  font-size: 16px;
}
.input-group .input:first-child:not(:last-child) {
  border-bottom: none;
}
.input-group .input:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.input-group .input:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.btn {
  margin-top: 12px;
  border-radius: 3px;
  font-size: 16px;
}
.btn.button-hover {
  opacity: .9;
}
.btn::after {
  display: none;
}
.btn-primary {
  background-color: #63c284;
  color: #fcfcfc;
}
.btn-primary[disabled] {
  color: #fcfcfc !important;
  background-color: #a1dab5 !important;
}
.cells {
  position: relative;
  margin-top: 16px;
  background-color: #fff;
  line-height: 20px;
  font-size: 16px;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  color: #616161;
}
.cells .cell {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  border-top: 1px solid #f3f3f3;
}
.cells .cell:first-child {
  border-top: none;
}
.cells .cell.action::after {
  flex-grow: 1;
  text-align: right;
  font-family: "icomoon";
  content: "\E909";
}
button.cell {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}
button.cell.button-hover {
  background-color: #dedede;
}
button.cell::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.active-channel::after {
  content: "";
  width: 16px;
  height: 18px;
  background-image: url("");
  background-size: 16px 18px;
}
.channel-group {
  margin: 0 -12px;
  padding: 0 12px;
  border-bottom: 1px solid #f5f5f5;
  background: #ffffff;
}
.channel-group .channel-group-title {
  margin: 0 -12px;
  padding: 4px 12px;
  line-height: 20px;
  font-size: 12px;
  color: #acacab;
  border-bottom: 1px solid #f3f3f3;
}
.channel {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px;
  margin: 0 -12px;
}
.channel:active {
  background-color: #f5f5f5;
}
.channel .channel-cover {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.channel .channel-name {
  margin-left: 12px;
  font-size: 16px;
  color: #616161;
  flex-grow: 1;
}
.channel .channel-name.channel-mhz::after {
  content: "MHz";
  margin-left: 6px;
  font-size: 14px;
  color: #f3f3f3;
}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.player-footer {
  position: fixed;
  height: 64px;
  box-sizing: border-box;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 0 12px;
  background-color: #fcfcfc;
  box-shadow: 0 -1px 1px 0 rgba(75, 75, 75, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.player-footer__cover {
  width: 34px;
  height: 34px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
}
.player-footer__circle-progress__container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
}
.player-footer__circle-progress__container::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid #e1e6e3;
  border-radius: 50%;
  box-sizing: border-box;
}
.player-footer__circle-progress__container::after {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  content: "\E906";
  display: block;
  font-size: 32px;
  font-family: 'icomoon';
  color: #4fb974;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 36px;
}
.player-footer__circle-progress__container.playing::after {
  display: none;
}
.player-footer__circle-progress__container::after {
  font-size: 16px;
}
.player-footer__circle-progress__left-wrapper {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
.player-footer__circle-progress__right-wrapper {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
}
.player-footer__circle-progress__left-inner-circle {
  width: 200%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  border: 2px solid transparent;
  transition: transform .3s linear;
  box-sizing: border-box;
  border-left-color: #4fb974;
  border-bottom-color: #4fb974;
  left: 0;
  top: 0;
  transition-delay: .3s;
  transform: rotate(225deg);
}
.player-footer__circle-progress__right-inner-circle {
  width: 200%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  border: 2px solid transparent;
  transition: transform .3s linear;
  box-sizing: border-box;
  border-right-color: #4fb974;
  border-top-color: #4fb974;
  top: 0;
  right: 0;
  transform: rotate(225deg);
}
.player-footer__intro {
  overflow: hidden;
  display: block;
  height: 36px;
  flex: 1 1;
  margin: 0 12px;
}
.player-footer__title {
  display: flex;
  line-height: 16px;
  height: 16px;
  vetical-align: middle;
}
.player-footer__title::after {
  content: "";
  width: 0;
  display: inline-block;
  height: 100%;
  vetical-align: middle;
}
.player-footer__channel_name {
  display: block;
  font-size: 14px;
  color: #acacab;
  margin-top: 4px;
  line-height: 16px;
  height: 16px;
}
.player-footer__title__text {
  vetical-align: middle;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 14px;
  line-height: 16px;
}
.player-footer__douban-icon-heart {
  display: block;
  margin: 0 0 0 12px;
  padding: 0 !important;
  width: 24px;
  flex: 0 0 24px;
  height: 24px;
  box-sizing: border-box;
  background-size: 24px 24px !important;
  background: url("") no-repeat !important;
}
.player-footer__douban-icon-heart::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.player-footer__douban-icon-heart--active {
  display: block;
  margin: 0 0 0 12px;
  padding: 0 !important;
  width: 24px;
  flex: 0 0 24px;
  height: 24px;
  box-sizing: border-box;
  background-size: 24px 24px !important;
  background: url("") no-repeat !important;
}
.player-footer__douban-icon-heart--active::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.player-footer__douban-icon-next {
  margin-left: 36px !important;
  display: block;
  margin: 0 0 0 12px;
  padding: 0 !important;
  width: 24px;
  flex: 0 0 24px;
  height: 24px;
  box-sizing: border-box;
  background-size: 24px 24px !important;
  background: url("") no-repeat !important;
}
.player-footer__douban-icon-next::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
